import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { Button, FormInstance, Modal, Space } from 'antd';
import ProCard from '@ant-design/pro-card';
import ProForm, { ProFormGroup, ProFormText, ProFormTextArea } from '@ant-design/pro-form';

import styles from '@/common/index.less';


export default () => {

    const tabActiveKeyState = React.useState<string>('base');

    const selectedIdState = React.useState<number>();
    const modalState = React.useState<boolean>();

    const formRef = React.useRef<FormInstance>();

    return <PageContainer
        className={styles.pageContainer}
        tabList={[{tab: '基本信息', key: 'base'}, {tab: '信息编辑', key: 'edit'}]}
        tabActiveKey={tabActiveKeyState[0]}
        extra={[
            <Button type='primary' onClick={() => {
                selectedIdState[1](0);
                tabActiveKeyState[1]('edit');
            }}>

                添加
            </Button>
        ]}
        footer={tabActiveKeyState[0] === 'edit' ? [
            <Button type='primary' onClick={async () => {
                const form = await formRef.current?.validateFields();
            }}>发布 </Button>
        ] : []}
        onTabChange={async (e) => {
            tabActiveKeyState[1](e);
        }}>

        {
            tabActiveKeyState[0] === 'base' &&
            (<ProTable
                bordered
                rowKey='id'
                pagination={false}
                toolBarRender={false}
                search={false}
            />)
        }
        {
            tabActiveKeyState[0] === 'edit' &&
            <Space direction='vertical' className={styles.editTab}>
                <ProCard title='信息编辑' className={styles.form}>
                    <ProForm
                        labelCol={{span: 3}}
                        layout='horizontal'
                        formRef={formRef}
                        validateMessages={{
                            required: '必填项'
                        }}
                        submitter={false}
                    >
                        <ProFormText name='id' hidden />
                        <ProFormGroup>
                            <ProFormText
                                width='xl'
                                rules={[{required: true}]}
                                name='title'
                                label='文章标题'
                                placeholder='请输入标题'
                            />
                            <ProFormText
                                width='xl'
                                name='thumb'
                                label='文章缩略图'
                                placeholder='请输入图片地址'
                            />
                        </ProFormGroup>

                        <ProFormGroup>
                            <ProFormTextArea
                                fieldProps={{
                                    maxLength: 140
                                }}
                                rules={[{required: true}]}
                                name='represent'
                                width='xl'
                                label='简单描述'
                                placeholder='请输入描述'
                            />
                        </ProFormGroup>

                        <ProFormGroup>
                            <ProFormText
                                rules={[{required: true}]}
                                name='content'
                                width='xl'
                                label='文章内容'
                                placeholder='word地址'
                            />
                        </ProFormGroup>
                    </ProForm>
                </ProCard>
            </Space>
        }
        <Modal title='手机预览' visible={modalState[0]}
               okText='确定'
               destroyOnClose={true}
               closable={true}
               style={{top: '50px'}}
               onCancel={() => {
                   modalState[1](false);
               }}
               onOk={() => {
                   modalState[1](false);
               }}
               bodyStyle={{maxHeight: '420px', overflow: 'auto'}}>
        </Modal>
    </PageContainer>;
}
